<!--
//
// GDrawer.vue
// hs-admin
//
// Created by 区区电脑 on 2023/05/27.
//
-->
<template>
    <div v-if="showCover&&modelValue" class="g-drawer-cover" :style="{zIndex: zIndex}" @click="coverClose&&onClose()"></div>
    <div :style="{width: (modelValue ? width : 0) + 'px', zIndex: zIndex + 1,}" class="GDrawer">
        <div :style="style" class="container">
            <div class="header">
                <div class="close">
                    <el-button @click="onClose" type="primary" link><b-icon name="bi-chevron-double-right"/></el-button>
                </div>
                <div class="header-default">
                    <template v-if="$slots.header">
                        <slot name="header"></slot>
                    </template>
                    <template v-else>
                        <span class="title">{{ title }}</span>
                    </template>
                </div>
            </div>
            <div v-if="modelValue" class="body">
                <slot name="default"></slot>
            </div>
            <div v-if="$slots.footer" class="footer" :class="{footerShadow}">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: () => false
    },
    width: {
        type: Number,
        default: () => 400
    },
    zIndex: {
        type: Number,
        default: () => 10
    },
    title: {
        type: String,
        default: () => "抽屉"
    },
    showCover: {
        type: Boolean,
        default: () => false
    },
    coverClose: {
        type: Boolean,
        default: () => true
    },
    footerShadow: {
        type: Boolean,
        default: () => false
    }
});
const emits = defineEmits(["update:modelValue", "close"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const style = computed(() => {
    return {
        width: props.width + "px",
        transform: `translateX(${props.modelValue ? 0 : props.width}px)`
    }
})

// 点击关闭
function onClose() {
    emits("update:modelValue", false)
    emits("close")
}


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.g-drawer-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: width 0.2s ease;
    background: rgba(0, 0, 0, 0.5);
}
.GDrawer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1002;
    transition: width 0.2s ease;
    overflow: hidden;


    .container {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        transition: all 0.2s ease;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        .header {
            width: 100%;
            box-sizing: border-box;
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            .close {
                width: 40px;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            .header-default {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .title {
                    font-size: 16px;
                }
            }

        }
        .body {
            box-sizing: border-box;
            width: 100%;
            flex: 1;
            overflow: auto;
        }
        .footer {
            box-sizing: border-box;
            width: 100%;
            min-height: 40px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            padding: 0 10px;
        }
        .footerShadow {
            box-shadow: -10px 0 20px 0 rgba(0, 0, 0, 0.3);
        }
    }
}
</style>
